<script setup lang="ts">
import { appStore } from '@/stores/appStore/appStore'
import { getImage } from '@/util/bussinessTool'
import { computed } from 'vue'
const app = appStore()
const emits = defineEmits(['refresh', 'noData'])
const props = defineProps({
    loadState: { //loading , noData, erro  done
        type: String,
        default: 'loading',
    },
    noDataImg: { //没有数据图片
        type: String,
        default: '',
    },
    noDataTitle: { //没有数据的
        type: String,
        default: '暂无数据~',
    },
})
let map: { [key: string]: any } = {
    erro: {
        img: app.errorImage,
        content: '加载错误，点击重新加载',
        emit: 'refresh'
    },
    noData: {
        img: props.noDataImg ? props.noDataImg : app.noDataImage,
        content: props.noDataTitle,
        emit: 'noData'
    },
    loading: {
        img: app.loadImage,
        content: '努力加载中...',
        emit: ''
    },
    done: {
        //加载完成
    }
}
const statusContent = computed(() => {
    return props.loadState ? map[props.loadState] : map.erro
})
function onClick() {
    if (map[props.loadState].emit) {
        emits(map[props.loadState].emit)
    }
}
</script>
<template>
    <div class="overflow-y-scroll">
        <div v-if="props.loadState === 'done'">
            <slot></slot>
        </div>
        <div v-else class="center">
            <img class="errorImage" :class="props.loadState === 'loading' ? 'animation' : ''"
                :src="getImage(statusContent.img)" />
            <div class="text-gray-300 i-text-16 i-mt-10" @click="onClick">{{ statusContent.content }}</div>
        </div>
    </div> 
</template>
<style >
.center {
    @apply flex flex-col w-screen items-center justify-center h-full 
}

.errorImage {
    width: 200px;
    height: auto;
    vertical-align: text-top;
}

.animation {
    animation: fadeOut;
    /* referring directly to the animation's @keyframe declaration */
    animation-duration: 1s;
    /* don't forget to set a duration! */
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.skeleton-div {
    width: 100%;
}

.skeleton-animate {
    animation: skeleton-blink 0.8s ease-in-out infinite;
}

@keyframes skeleton-blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

.tm-loadding-load {
    animation: xhRote 0.8s infinite linear;
}

@keyframes xhRote {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
</style>
